<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="layui.js"></script>
<link rel="stylesheet" href="css/layui.css" media="all">
</head>
<body>
    <h2 class="sub-header">请填写要新增的回答</h2>
	<hr/>
	<form class="form-horizontal" role="form"
		action="${pageContext.request.contextPath}/EmpServlet?op=insert" method="post">
		<div class="form-group">
			<label for="EMPNO" class="col-sm-2 control-label">请输入要增加的员工编号</label>
			<div class="col-sm-8">
				<input type="text" required="required" class="form-control"
					name="EMPNO" id="EMPNO" value="" />
			</div>
		</div>
		<div class="form-group">
			<label for="ENAME" class="col-sm-2 control-label">请输入要增加的员工姓名</label>
			<div class="col-sm-8">
				<input type="text" required="required" class="form-control"
					name="ENAME" id="ENAME" value="" />
			</div>
		</div>
		<div class="form-group">
			<label for="JOB" class="col-sm-2 control-label">请输入要增加的员工职位</label>
			<div class="col-sm-8">
				<input type="text" required="required" class="form-control"
					name="JOB" id="JOB" value="" />
			</div>
		</div>
		<div class="form-group">
			<label for="MGR" class="col-sm-2 control-label">请输入要增加的经理</label>
			<div class="col-sm-4">
				<select class="form-control" name="MGR" id="MGR">

				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="HIREDATE" class="col-sm-2 control-label">请输入要增加的时间</label>
			<div class="col-sm-8">
				<input type="text" class="layui-input" id="HIREDATE" name="HIREDATE" placeholder="请输入年月日">
			</div>
		</div>
		<div class="form-group">
			<label for="SAL" class="col-sm-2 control-label">请输入要增加的员工工资</label>
			<div class="col-sm-8">
				<input type="text" required="required" class="form-control"
					name="SAL" id="SAL" value="" />
			</div>
		</div>
		<div class="form-group">
			<label for="COMM" class="col-sm-2 control-label">请输入要增加的员工补贴</label>
			<div class="col-sm-8">
				<input type="text" required="required" class="form-control"
					name="COMM" id="COMM" value="" />
			</div>
		</div>
		<div class="form-group">
			<label for="DEPTNO" class="col-sm-2 control-label">请输入要修改的所在部门</label>
			<div class="col-sm-4">
				<select class="form-control" name="DEPTNO" id="DEPTNO">

				</select>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-5 col-sm-1">
				<button type="submit" style="width: 100px;" class="btn btn-danger">提交</button>
			</div>
		</div>
	</form>
	<script type="text/javascript">
		$(function() {
			//ajax的 get请求
			$.get("EmpServlet?op=queryEmp", function(data, status) {
				//使用js的内置对象JSON将返回的值转化为数组
				array = JSON.parse(data);
				//遍历数组
				$.each(array, function(index, emp) {
					$("#MGR").append(
							"<option value="+emp.EMPNO+">" + emp.ENAME
									+ "</option>");
				});
			});
		});
		$(function() {
			//ajax的 get请求
			$.get("DeptServlet?op=queryDept", function(data, status) {
				//使用js的内置对象JSON将返回的值转化为数组
				array = JSON.parse(data);
				//遍历数组
				$.each(array, function(index, dept) {
					$("#DEPTNO").append(
							"<option value="+dept.DEPTNO+">" + dept.DNAME
									+ "</option>");
				});
			});
		});
	</script>
	<script>
	//使用layui插件使日期选择更美观
		layui.use('laydate', function() {
			var laydate = layui.laydate;

			//常规用法
			laydate.render({
			    elem: '#HIREDATE'
			    ,type: 'datetime'
			});
		});
	</script>
</body>
</html>